<template>
    <div class="login-panel">
<!--        <h1 class="title">登陆</h1>-->
        <div class="center">
            <a-tabs v-model:activeKey="activeKey" type="card" class="login-center-tabs" centered :tabBarGutter="0">
                <a-tab-pane key="loginByAccount">
                    <template #tab>
                        <span>
                          <user-outlined />
                          账号登陆
                        </span>
                    </template>
                    <accountLogin ref="accountRef"/>
                </a-tab-pane>
                <a-tab-pane key="loginByMobile">
                    <template #tab>
                        <span>
                          <mobile-outlined />
                            手机登陆
                        </span>
                    </template>
                    <mobileLogin ref="mobileRef"/>
                </a-tab-pane>
            </a-tabs>
            <div class="password-operator">
                <div class="remember-password-div">
                    <a-checkbox v-model:checked="rememberPassword" class="remember-password-check">记住密码</a-checkbox>
                </div>
                <div class="forgot-password">
                    <a href="#">忘记密码</a>
                </div>
            </div>
            <a-button type="primary" class="submit-btn" @click="handlerLogin">立即登陆</a-button>
        </div>
    </div>
</template>

<script setup lang="ts">
import {defineComponent, Ref, ref} from 'vue';
import accountLogin from './account-login.vue';
import mobileLogin from './mobile-login.vue';

const activeKey = ref("loginByAccount");

const rememberPassword:Ref<boolean> = ref(true);

const accountRef = ref<InstanceType<typeof accountLogin>>();

type MobileAccountType = InstanceType<typeof mobileLogin>;

const mobileRef = ref<MobileAccountType>();

const handlerLogin = () => {
    console.log("立即登陆")
    if (activeKey.value === 'loginByAccount'){
        accountRef.value?.loginHandler(rememberPassword.value);
    }else{
        mobileRef.value?.loginHandler();
    }
}

</script>

<style scoped lang="less">
.login-panel{
    margin-bottom: 150px;
    width: 320px;


    .title{
        width: 100%;
        text-align: center;
    }
    .center{
        :deep(.ant-tabs-nav-list){
            width: 100%;
        }
        :deep(.ant-tabs-tab){
            flex: 1;
            justify-content: center;
        }
        .ant-tabs{
            border: 1px solid #E1E7EF;
            box-shadow: 3px 4px 5px #888888;
            border-radius: 3px;

            .ant-tabs-tabpane{
                padding: 10px 15px;
            }

        }
    }

    .submit-btn{
        width: 100%;
        flex: 1;
        border-radius: 5px;
    }

    .password-operator{
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-top: 15px;

        .remember-password-div{
            .remember-password-check{
                color: #1890ff;
            }

        }

    }

    .forgot-password{
        text-align: right;
    }
}


</style>
